<template>
  <div class="internship">
    <el-card class="box-card">
      <!-- 查询区 -->
      <el-form ref="queryFormRef" :model="queryInfo" size="small" :inline="true">
        <el-form-item label="员工编号" prop="id">
          <el-input
            v-model="queryInfo.id"
            clearable
            @keyup.enter.native="handleQuery"
            placeholder="请输入员工编号搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="empName">
          <el-input
            v-model="queryInfo.empName"
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="请输入员工姓名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <dept-select :value.sync="queryInfo.deptId" style="width:200px" />
        </el-form-item>
        <el-form-item label="岗位" prop="staId">
          <station-select :value.sync="queryInfo.staId" />
        </el-form-item>
        <el-form-item label="试用期开始日期" prop="startDate">
          <el-date-picker
            v-model="queryInfo.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="试用期开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="试用期结束日期" prop="endDate">
          <el-date-picker
            v-model="queryInfo.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="试用期结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryInfo.internStatus" clearable placeholder="请选择">
            <el-option label="正常" :value="0"></el-option>
            <el-option label="延期" :value="2"></el-option>
            <el-option label="未录用" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
          <el-button size="mini" @click="handleReset('queryFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="employeesDataList"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        style="width: 100%;"
        v-loading="loading"
      >
        <el-table-column label="员工编号" prop="id" width="120" align="center"></el-table-column>
        <el-table-column label="员工姓名" prop="empName" width="150" align="center"></el-table-column>
        <el-table-column label="部门名称" prop="deptName" width="150" align="center"></el-table-column>
        <el-table-column label="岗位名称" prop="staName" width="150" align="center"></el-table-column>
        <el-table-column label="试用期状态" width="150" align="center">
          <template slot-scope="{row}">
            <el-tag type="success" size="small" v-if="row.internStatus===0">正常</el-tag>
            <el-tag type="info" size="small" v-else-if="row.internStatus===2">延期</el-tag>
            <el-tag type="danger" size="small" v-else-if="row.internStatus===3">未录用</el-tag>
            <!-- {{['正常','转正','延期','未录用'][row.internStatus]}} -->
          </template>
        </el-table-column>
        <el-table-column label="试用期开始日期" prop="startDate" align="center">
          <template slot-scope="{row}">{{row.startDate | formatDate }}</template>
        </el-table-column>
        <el-table-column label="试用期结束日期" align="center">
          <template slot-scope="{row}">{{row.endDate | formatDate }}</template>
        </el-table-column>
        <el-table-column label="调动操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleAssess(scope.row)">考核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getEmployeeInfoList"
        @current-change="getEmployeeInfoList"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog
      title="员工考核"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="dialogClose"
      width="500px"
    >
      <el-form
        ref="internshipFormRef"
        :model="internshipFormData"
        :rules="internshipRule"
        label-width="100px"
        size="small"
      >
        <el-form-item label="员工姓名">
          <el-input v-model="internshipFormData.empName" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="考核结果" prop="internStatus">
          <el-radio-group v-model="internshipFormData.internStatus" @change="internStatusChange">
            <el-radio :label="1">转正</el-radio>
            <el-radio :label="2">延期</el-radio>
            <el-radio :label="3">未录用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="operText+'日期'" prop="operDate">
          <el-date-picker
            v-model="internshipFormData.operDate"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="operText+'日期'"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="考核评语" prop="comment">
          <el-input type="textarea" v-model="internshipFormData.comment" placeholder="考核评语"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="internshipFormData.remark" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('internshipFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listInternshipApi, updateInternshipApi } from "@/api/internship";
export default {
  name: "",
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // // 员工编号
        id: undefined,
        // // 员工姓名
        empName: undefined,
        // // 部门名称
        deptId: undefined,
        // // 岗位名称
        staId: undefined,
        // 开始日期
        startDate: undefined,
        // 结束日期
        endDate: undefined,
        // // 状态
        internStatus: undefined,
      },
      employeesDataList: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      internshipFormData: {},
      operText: "操作",
      internshipRule: {
        internStatus: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        operDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        comment: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getEmployeeInfoList();
  },
  methods: {
    async getEmployeeInfoList() {
      try {
        this.loading = true;
        const { data, code } = await listInternshipApi(this.queryInfo);
        if (code !== 200) return;
        this.employeesDataList = data.datas;
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.pageSize = 1;
      this.getEmployeeInfoList();
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
      this.getEmployeeInfoList();
    },
    handleAssess(row) {
      if (row.internStatus === 3) {
        return this.$message.warning("该员工已不被录用，无法再修改");
      }
      this.internshipFormData.empName = row.empName;
      this.internshipFormData.id = row.internshipId;
      this.internshipFormData.empId = row.id;

      this.dialogVisible = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm() {
      this.$refs.internshipFormRef.validate(async (vaild) => {
        if (!vaild) return;
        console.log("object");
        const { code } = await updateInternshipApi(this.internshipFormData);
        if (code !== 200) return;
        this.getEmployeeInfoList();
        this.$message.success("操作成功");

        this.dialogVisible = false;
      });
    },
    internStatusChange(value) {
      this.operText = ["转正", "延期", "未录用"][value - 1];
    },
    dialogClose() {
      this.resetForm("internshipFormRef");
    },
  },
};
</script>

<style scoped lang="scss">
.el-pagination {
  margin-top: 20px;
}
</style>
